<!-- 异步组件通过defineAsyncComponent来实现 -->
<!-- defineAsyncComponent方法接受一个返回promise的函数，defineAsyncComponent(() => { return new Promise(resolve => { resolve()} ) } ) -->
<!-- 也可以用来引入单文件AsyncComp = defineAsyncComponent(() => import('./test.vue')) 得到的AsyncComp是一个外层包装的组件 -->
<!-- 仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将接收到的 props 和插槽传给内部组件，
  所以你可以使用这个异步的包装组件无缝地替换原始组件，同时实现延迟加载 
  可以搭配<Suspense>一起使用(后续写例子) -->
<script setup>
import { defineAsyncComponent } from 'vue'

const asyncComponent = defineAsyncComponent(() =>
  import('./components/asyncComponent.vue')
)
</script>

<template>
  <div>
    <asyncComponent loading="aaa" />
  </div>
</template>

<style lang="scss" scoped></style>
